import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';

import '../../constants.dart';
import '../../routes/app_routes.dart';
import 'logic.dart';

class LoginPage extends StatelessWidget {
  LoginPage({Key? key}) : super(key: key);

  final logic = Get.find<LoginLogic>();

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () => FocusScope.of(context).unfocus(),
        child: Scaffold(
          resizeToAvoidBottomInset: false,
          backgroundColor: Colors.white,
          body: Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                  image: AssetImage('assets/images/login_background.jpg'),
                  fit: BoxFit.fitHeight),
            ),
            alignment: Alignment.center,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SvgPicture.asset(
                  'assets/images/logo.svg',
                  width: 68.w,
                  height: 68.w,
                ),
                SizedBox(height: kSpaceMedium),
                Text(
                  '欢迎登录师付平台',
                  style: TextStyle(
                    fontSize: kFontSizeLarge,
                  ),
                ),
                SizedBox(height: kSpaceHuge),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: kSpaceBig),
                  child: TextField(
                    controller: logic.usernameController.value,
                    keyboardType: TextInputType.number,
                    inputFormatters: <TextInputFormatter>[
                      FilteringTextInputFormatter.digitsOnly
                    ],
                    decoration: InputDecoration(
                      hintText: '请输入手机号',
                      hintStyle: TextStyle(
                        color: const Color(0xFFB6BCCB),
                        fontSize: kFontSizeSmall,
                      ),
                      fillColor: Colors.white,
                      filled: true,
                      contentPadding: const EdgeInsets.symmetric(
                          vertical: 14, horizontal: 14),
                      border: OutlineInputBorder(
                        borderRadius:
                            BorderRadius.all(Radius.circular(kRadiusSmall)),
                        borderSide: BorderSide.none,
                      ),
                    ),
                  ),
                ),
                SizedBox(height: kSpaceMedium),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: kSpaceBig),
                  child: TextField(
                    controller: logic.passwordController.value,
                    obscureText: true,
                    decoration: InputDecoration(
                      hintText: '请输入密码',
                      hintStyle: TextStyle(
                        color: const Color(0xFFB6BCCB),
                        fontSize: kFontSizeSmall,
                      ),
                      fillColor: Colors.white,
                      filled: true,
                      contentPadding: const EdgeInsets.symmetric(
                          vertical: 14, horizontal: 14),
                      border: OutlineInputBorder(
                        borderRadius:
                            BorderRadius.all(Radius.circular(kRadiusSmall)),
                        borderSide: BorderSide.none,
                      ),
                    ),
                  ),
                ),
                SizedBox(height: kSpaceSmall),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: kSpaceBig),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      // 选择框
                      Obx(
                        () => Checkbox(
                          value: logic.isAgree.value,
                          onChanged: (value) => logic.isAgree.value = value!,
                          visualDensity: const VisualDensity(
                              horizontal: VisualDensity.minimumDensity,
                              vertical: VisualDensity.minimumDensity),
                          activeColor: const Color(0xFF495AFF),
                          materialTapTargetSize:
                              MaterialTapTargetSize.values[0],
                        ),
                      ),
                      RichText(
                        text: TextSpan(
                          style: const TextStyle(height: 1.5),
                          children: [
                            TextSpan(
                              text: '我已阅读并同意 ',
                              style: TextStyle(
                                fontSize: kFontSizeMini,
                                color: const Color(0xFF697491),
                              ),
                            ),
                            TextSpan(
                              text: '用户协议',
                              style: TextStyle(
                                fontSize: kFontSizeMini,
                                color: const Color(0xFF495AFF),
                              ),
                              recognizer: TapGestureRecognizer()
                                ..onTap = () => logic.onClickAgreement(),
                            ),
                            TextSpan(
                              text: ' 和 ',
                              style: TextStyle(
                                fontSize: kFontSizeMini,
                                color: Colors.grey,
                              ),
                            ),
                            TextSpan(
                              text: '隐私政策',
                              style: TextStyle(
                                fontSize: kFontSizeMini,
                                color: const Color(0xFF495AFF),
                              ),
                              recognizer: TapGestureRecognizer()
                                ..onTap = () => logic.onClickPrivacy(),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(height: kSpaceHuge),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: kSpaceBig),
                  child: SizedBox(
                    width: double.infinity,
                    height: kIconSizeLarge,
                    child: Obx(
                      () => FilledButton(
                        onPressed:
                            logic.isLoading.value ? null : () => logic.login(),
                        child: Text(
                          '登 录',
                          style: TextStyle(fontSize: kFontSizeMedium),
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(height: kSpaceSmall),
                TextButton(
                  onPressed: () => {Get.back()},
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        '验证码登录',
                        textAlign: TextAlign.start,
                        style: TextStyle(
                          color: const Color(0xFF495AFF),
                          fontSize: kFontSizeMedium,
                          height: -0.1,
                        ),
                      ),
                      Icon(
                        Icons.arrow_forward_ios,
                        color: const Color(0xFF495AFF),
                        size: 18.w,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ));
  }
}
